<!-- 所有用户 -->
<template>
  <div class="resume_header">
    <span>所有用户</span>
  </div>
  <div class="resume_center">
    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)" style="width: 100%" height="520px"
      size="large" @filter-change="tablesort">
      <el-table-column label="姓名" prop="name" sortable />
      <el-table-column label="性别" prop="gander" sortable  column-key="gander" :filters="filterUserGanderData" />
      <el-table-column label="手机号" prop="phone" sortable />
      <el-table-column label="邮箱" prop="email" sortable />
      <el-table-column label="所在城市" prop="address"  sortable column-key="address" :filters="filterUserAddressData" />
      <el-table-column label="学历" prop="education" sortable column-key="education" :filters="filterUserEducationData" />
      <el-table-column label="院校" prop="schoolName" sortable />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-popconfirm width="220" confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF" title="是否确认操作?"
            cancel-button-type="info" @confirm="handleInitPwd(scope.$index, scope.row)">
            <template #reference>
              <el-button size="default" type="primary" >初始化密码</el-button>
            </template>
          </el-popconfirm>
          
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>
  </div>

</template>
<script lang='ts' setup>
import { template } from 'lodash';
import { computed, ref, onMounted, reactive, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import Pagination from "@/components/Pagination.vue"
import {adminGetAllUsers,adminInitPwd} from "@/api/adminApi"
import { data,elmessage } from '@/hook/hook';
import {useRouter} from "vue-router"
const store = useStore()
const router=useRouter()
const users = store.state.uState.users
// 表格数据定义
interface Users {
  uId: string,
  name: string,
  gander: string,
  phone: string,
  email: string,
  address: string,
  education: string,
  schoolName: string,
}
const tableData: Users[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data, index) =>
      !search.value ||
      // 通过求职者性别筛选
      data.name.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)

// 筛选

// 定义筛选类型
interface filterType {
  text: string,
  value: string
}
const filterUserGanderData: filterType[] = reactive([])
const filterUserAddressData: filterType[] = reactive([])
const filterUserEducationData: filterType[] = reactive([])

var userGanderArr:any=reactive([])
var userAddressArr:any=reactive([])
var userEducationArr:any=reactive([])

const tableData_1: Users[] = reactive([])
const setUserGanderArr = (arr: any) => {
  userGanderArr = arr
}
const getJobIndustry = () => {
  return userGanderArr
}

const setAddressArr = (arr: any) => {
  userAddressArr = arr
  // console.log(userAddressArr);
  
}
const getAddressArr = () => {
  return userAddressArr
}
const setEducationArr = (arr: any) => {
  userEducationArr = arr
}
const getEducationArr = () => {
  return userEducationArr
}

const tablesort = (filterArr: Users) => {
  // 清除原表格数据
  tableData.splice(0, tableData.length)
  if ((typeof (filterArr.gander)) == "object") {
    setUserGanderArr(filterArr.gander)
  }
  if ((typeof (filterArr.address)) == "object") {
    setAddressArr(filterArr.address)
  }
  if ((typeof (filterArr.education)) == "object") {
    setEducationArr(filterArr.education)
  }
  const ganderLength = getJobIndustry().length
  const addressLength = getAddressArr().length
  const educationLength = getEducationArr().length
  // 按筛选条件重新加入数据
  tableData_1.forEach((valu: any, index: any, arr_1: any) => {
    // 所有筛选重置，即最初排序
    if (ganderLength == 0 && addressLength == 0 && educationLength == 0) {
      if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
        tableData.push(valu)
      }

    }
    // 只筛选求职者性别
    else if (ganderLength > 0 && addressLength == 0 && educationLength == 0) {
      if (getJobIndustry().includes(valu["gander"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选求职者所在地
    else if (ganderLength == 0 && addressLength > 0 && educationLength == 0) {
      
      if (getAddressArr().includes(valu["address"].split("-")[0])) {
          if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
            tableData.push(valu)
          }
        }
    }
    // 只筛选求职者学历
    else if (ganderLength == 0 && addressLength == 0 && educationLength > 0) {
      if (getEducationArr().includes(valu["education"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选求职者性别、求职者所在地
    else if (ganderLength > 0 && addressLength > 0 && educationLength == 0) {
      if (getJobIndustry().includes(valu["gander"]) && getAddressArr().includes(valu["address"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选求职者性别、求职者学历
    else if (ganderLength > 0 && addressLength == 0 && educationLength > 0) {
      if (getJobIndustry().includes(valu["gander"]) && getEducationArr().includes(valu["education"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选求职者所在地、求职者学历
    else if (ganderLength == 0 && addressLength > 0 && educationLength > 0) {
      if (getAddressArr().includes(valu["address"]) && getEducationArr().includes(valu["education"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选求职者性别、求职者所在地、求职者学历
    else if (ganderLength > 0 && addressLength > 0 && educationLength > 0) {
      if (getJobIndustry().includes(valu["gander"]) && getAddressArr().includes(valu["address"]) && getEducationArr().includes(valu["education"])) {
        if (tableData.findIndex((item: { uId: string; }) => item.uId == valu["uId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
  })
}



// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  limit.value = val
  page.value = 1

}
const handleCurrentChange = (val: number) => {
  page.value = val
}


// // 初始化数据
// function initData() {
//   users.forEach((value: any, index: any, self: any) => {
//     tableData.push(value)
//   })
// }
const  handleInitPwd=(index: number, row: Users)=>{
  const newData={
    ...data(),
    initPart:"user",
    uId:row.uId
  }
  adminInitPwd(newData).then((res:any)=>{
    if (res.data["code"] == "200") {
      elmessage(res.data["message"], res.data["type"])
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
}

const init=()=>{
  adminGetAllUsers(data()).then((res:any)=>{
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
        tableData_1.push(value)
      })
      res.data["gander"].forEach((value: any, index: any, self: any) => {
        filterUserGanderData.push(value)
      });
      res.data["address"].forEach((value: any, index: any, self: any) => {
        filterUserAddressData.push(value)
      });
      res.data["education"].forEach((value: any, index: any, self: any) => {
        filterUserEducationData.push(value)
      });
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
}

onBeforeMount(()=>{
  init()
})




</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #000;
}
</style>